<template>
  <div class="v-outline-menu">
    <div >
      <div class="_hold-bar"/>
      <div class="_bar-item-container">
        <div v-for="panel in panelList" :key="panel.name" class="__bar-item" @click="handleToggle(panel.name)">
          <div class="geSpriteT" style="width: 16px;height: 16px;" :class="panel.icon" />
        </div>
      </div>
      <div class="_drop-bar" @click="showToggle">
        <img src="statics/icons/app/arrowdown12.svg" :class="{_dropicon:dropActive}"/>
      </div>
    </div>

    <div v-show="activePanel==='outline'" class="_panel" >
      <div class="_panel-header g-jc-sb">
        <span class="g-bolder">缩略图</span>
        <img src="statics/images/mainpage/topicon3.svg" class="g-pointer" title="close" @click="handleClose"/>
      </div>
      <div class="_panel-container" style="padding:0">
        <div ref="outlineDom" style="width:240px;height:200px" />
      </div>
    </div>

    <div v-if="activePanel==='stylepanel'" class="_panel">
      <div class="_panel-header g-jc-sb">
        <span class="g-bolder">样式</span>
        <img src="statics/images/mainpage/topicon3.svg" class="g-pointer" title="close" @click="handleClose"/>
      </div>
      <div class="_panel-container">
        <div>
          <div class="g-m-b-10 g-bolder">边框</div>
          <a-input v-model="styleData.strokeColor" type="color" @change="handleStyleChange"/>
          <a-select default-value="0" size="small" class="g-m-select" @change="handleBorderSelectChange">
            <a-select-option v-for="item in borderLines" :key="item.value" :value="item.value" :disabled="item.disabled">{{item.label}}</a-select-option>
          </a-select>
          <a-input-number
            v-model="styleData.strokeWidth"
            :min="1"
            size="small"
            style="width:60px;margin-left:10px"
            @change="handleStyleChange"/>
          <div class="_bottom-border g-m-t-4">
            <a-checkbox-group v-model="checkedList" :options="options" @change="handleCheckboxChange" />
          </div>
        </div>

        <div>
          <div class="g-m-b-10 g-m-t-10 g-bolder">填充</div>
          <div class="_select-width">
            <a-select
              default-value="0"
              size="small"
              style="display: inline"

              @change="handleSelectChange2">
              <a-select-option v-for="item in isGradient" :key="item.value" :value="item.value" :disabled="item.disabled">{{item.label}}</a-select-option>
            </a-select>
          </div>
          <div class="_bottom-border g-pd-l-12 g-pd-b-10">
            <a-input v-model="styleData.fillColor" type="color" size="small" @change="handleStyleChange" />
            <a-select
              v-if="isShow"
              :default-value="styleData.gradientDirection"
              size="small"
              class="g-m-select"
              @change="handleDirectSelectChange" >
              <a-select-option v-for="item in gradientDirect" :key="item.value" :value="item.value" :disabled="item.disabled">{{item.label}}</a-select-option>
            </a-select>
          </div>

        </div>

        <!-- <div>
          <div class="g-m-b-3 g-m-t-8 g-bolder">不透明度</div>
          <a-input-number
            v-model="styleData.opacity"
            step="2"
            size="small"
            style="width:64px"
            :min="1"
            :max="100"
            :formatter="value => `${value}%`"
            :parser="value => value.replace('%', '')"
            @change="handleStyleChange"/>
        </div> -->
      </div>
      <div v-if="isDev">style: <a-textarea v-model="styleStr" :auto-size="{ minRows: 5, maxRows: 100 }" style="width:200px"  @change="handleStyleStrChange"/></div>
    </div>

    <div v-if="activePanel==='textpanel'" class="_panel" >
      <div class="_panel-header g-jc-sb">
        <span class="g-bolder">文字</span>
        <img src="statics/images/mainpage/topicon3.svg" class="g-pointer" title="close" @click="handleClose"/>
      </div>
      <div class="_panel-container" >
        <div class="g-m-b-10 g-bolder">字体</div>
        <div>
          <a-select
            v-model="fontData.fontFamily"
            size="small"
            class="_width-change"
            style="display:inline;margin-bottom: 5px;"
            @change="handleFontChange">
            <a-select-option v-for="item in fontFamilys" :key="item.value" :value="item.value" :disabled="item.disabled">{{item.label}}</a-select-option>
          </a-select>
          <div class="_bottom-border g-pd-l-11 g-m-t-5 g-pd-b-8">
            <a-button class="geButton geColorBtn g-m-button" :class="{changeColor:buttonFlag.bold===1}" @click="handleFontStyle('bold')">
              <div class="geSprite geSprite-bold"></div>
            </a-button>
            <a-button class="geButton geColorBtn g-m-button" :class="{changeColor:buttonFlag.italic===1}" @click="handleFontStyle('italic')">
              <div class="geSprite geSprite-italic"></div>
            </a-button>
            <a-button class="geButton geColorBtn g-m-button" :class="{changeColor:buttonFlag.underline===1}" @click="handleFontStyle('underline')">
              <div class="geSprite geSprite-underline"></div>
            </a-button>
          </div>

          <!--          <div>大小： <a-input-number v-model="fontData.fontSize" :min="1" style="width:60px" @change="handleFontChange"/></div>-->
        </div>

        <div class="g-m-b-7 g-m-t-7 g-bolder">排版</div>
        <div>
          <a-button class="geButton geColorBtn g-m-button" :class="{changeColor:buttonFlag.left===1}" @click="handleFontStyle('left')">
            <div class="geSprite geSprite-left"></div>
          </a-button>
          <a-button class="geButton geColorBtn g-m-button" :class="{changeColor:buttonFlag.center===1}" @click="handleFontStyle('center')">
            <div class="geSprite geSprite-center"></div>
          </a-button>
          <a-button class="geButton geColorBtn g-m-button" :class="{changeColor:buttonFlag.right===1}" @click="handleFontStyle('right')">
            <div class="geSprite geSprite-right"></div>
          </a-button>
          <a-button style="margin-left:9px;" class="geButton geColorBtn g-m-button" :class="{changeColor:buttonFlag.top===1}" @click="handleFontStyle('top')">
            <div class="geSprite geSprite-top" ></div>
          </a-button>
          <a-button class="geButton geColorBtn g-m-button" :class="{changeColor:buttonFlag.middle===1}" @click="handleFontStyle('middle')">
            <div class="geSprite geSprite-middle"></div>
          </a-button>
          <a-button class="geButton geColorBtn g-m-button" :class="{changeColor:buttonFlag.bottom===1}" @click="handleFontStyle('bottom')">
            <div class="geSprite geSprite-bottom"></div>
          </a-button>

        </div>

        <div class="_bottom-border g-pd-l-12 g-pd-b-8 g-m-b-10">
          <div class="g-m-t-9">
            <div class="g-m-b-10 g-m-r-24 g-inline">间距</div>
            <div class="g-inline g-m-r-8 g-m-l-20">
              <a-input-number v-model="fontData.spacing" size="small" style="width:60px" @change="handleFontChange"/>
            </div>
            <div class="g-inline">
              <a-input-number v-model="fontData.spacingTop" size="small" style="width:60px" @change="handleFontChange"/>
            </div>

          </div>
          <div class="g-fs-12" style="margin-left:90px;">
            <span style="margin-right:50px;">全局</span>
            <span>顶</span>
          </div>

          <div>

            <div class="g-inline" style="margin-right:10px;"><a-input-number v-model="fontData.spacingLeft" size="small" style="width:60px" @change="handleFontChange"/></div>
            <div class="g-inline" style="margin-right:10px;"><a-input-number v-model="fontData.spacingRight" size="small" style="width:60px" @change="handleFontChange"/></div>
            <div class="g-inline"><a-input-number v-model="fontData.spacingBottom" size="small" style="width:60px" @change="handleFontChange"/></div>
          </div>
          <div class="g-fs-12">
            <span style="margin-left:23px;margin-right:61px;">左</span>
            <span style="margin-right:57px;">右</span>
            <span>底</span>
          </div>

        </div>

        <div class="g-m-b-10 g-bolder">颜色</div>
        <div style="display:flex;flex-direction:column;">
          <div class="g-m-b-8">
            <span class="g-fs-12 g-bold">字体颜色</span>
            <a-input
              v-model="fontData.fontColor"
              type="color"
              size="small"
              style="margin-left:88px;"
              @change="handleFontChange"/>
          </div>
          <div class="g-m-b-8">
            <span class="g-fs-12 g-bold">背景色</span>
            <a-input
              v-model="fontData.labelBackgroundColor"
              type="color"
              size="small"
              style="margin-left:101px;"
              @change="handleFontChange"/>
          </div>
          <div class="g-m-b-8">
            <span class="g-fs-12 g-bold">边框颜色</span>
            <a-input
              v-model="fontData.labelBorderColor"
              type="color"
              size="small"
              style="margin-left:88px;"
              @change="handleFontChange"/>
          </div>
          <div>
            <span class="g-fs-12 g-bold">透明度</span>
            <a-input-number
              v-model="fontData.textOpacity"
              :default-value="100"
              :min="1"
              :max="100"
              :formatter="value => `${value}%`"
              :parser="value => value.replace('%', '')"
              size="small"
              style="width:60px;margin-left:87px;"
              @change="handleFontChange"/>
          </div>
        </div>
      </div>
    </div>

    <div v-if="activePanel==='arrangepanel'" class="_panel" >
      <div class="_panel-header g-jc-sb">
        <span class="g-bolder">布局</span>
        <img src="statics/images/mainpage/topicon3.svg" class="g-pointer" title="close" @click="handleClose"/>
      </div>
      <div class="_panel-container">
        <div class="g-m-b-10 g-bolder">大小</div>
        <div>
          <div class="g-m-b-10">
            <span class="g-pd-r-3 g-fs-12 g-bold">宽</span>
            <a-input-number
              v-model="shapeData.width"
              size="small"
              :precision="0"
              @change="handleShapeSizeChange('width')"/>
            <span class="g-m-l-4 g-m-r-3 g-fs-12 g-bold">高</span>
            <a-input-number v-model="shapeData.height" size="small" :precision="0" @change="handleShapeSizeChange('height')"/>
          </div>
          <!-- <div class="g-m-b-10">
            <span class="g-fs-12 g-bold">高</span>
            <a-input-number v-model="shapeData.height" size="small" :precision="0" @change="handleShapeSizeChange('height')"/>
          </div> -->
          <div class="_bottom-border g-m-l-(-12) g-m-r-(-12) g-pd-b-15 g-pd-l-12">
            <a-checkbox class=".g-m-checkbox" @change="handleCheckChange('ratio')"/>
            <span class="g-fs-12 g-bold" style="margin-left:4px;">等比例缩放</span>
          </div>

          <!-- <hr/> -->
          <div class="g-m-t-6 g-m-b-10 g-bolder">位置</div>
          <div>
            <div class="g-m-b-10">
              <span class="g-pd-r-3 g-fs-12 g-bold">X</span>
              <a-input-number v-model="shapeData.x" size="small" :precision="0" @change="handleShapeSizeChange('x')"/>
              <span class="g-m-l-11 g-m-r-3 g-fs-12 g-bold">Y</span>
              <a-input-number v-model="shapeData.y" size="small" :precision="0" @change="handleShapeSizeChange('y')"/>
            </div>
            <!-- <div class="g-m-b-10">
              <span class="g-m-l-4 g-m-r-3 g-fs-12 g-bold">y</span>
              <a-input-number v-model="shapeData.y" size="small" :precision="0" @change="handleShapeSizeChange('y')"/>
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <div v-if="activePanel==='canvaspanel'" class="_panel">
      <div class="_panel-header g-jc-sb">
        <span class="g-bolder">画布</span>
        <img src="statics/images/mainpage/topicon3.svg" class="g-pointer" title="close" @click="handleClose"/>
      </div>
      <div class="_panel-container">
        <div class="g-m-b-10 g-bolder">边框</div>
        <div class="_bottom-border g-pd-l-13 g-pd-b-10">
          <a-checkbox class=".g-m-checkbox" :checked="canvasData.isGrid" @change="handleCheckChange('grid')"/>
          <span class="g-fs-12 g-bold g-pd-l-3">网格</span>
          <a-input
            v-if="canvasData.isGrid"
            v-model="canvasData.gridColor"
            type="color"
            size="small"
            @change="handleCanvasChange('gridColor')"/>
          <a-input-number
            v-if="canvasData.isGrid"
            v-model="canvasData.gridSize"
            size="small"
            :min="canvasData.min"
            :max="canvasData.max"
            :precision="0"
            @change="handleCanvasChange('gridSize')"/>
        </div>
        <div class="g-m-b-10 g-bolder g-m-t-8">页面尺寸</div>
        <div>
          <a-select
            :default-value="canvasData.bounds"
            size="small"
            class="g-m-select"
            style="display:inline;margin-bottom: 5px;"
            @change="handleSelectChange2" >
            <a-select-option v-for="item in canvasBounds" :key="item.value" :value="item.value" :disabled="item.disabled">{{item.label}}</a-select-option>
          </a-select>

          <div class="g-m-t-7">
            <a-checkbox class=".g-m-checkbox" :checked="canvasData.gridDirect==='cross'" @change="handleCheckChange('cross')"/>
            <span class="g-pd-l-3 g-m-r-6 g-fs-12 g-bold">纵向</span>
            <a-checkbox class=".g-m-checkbox" :checked="canvasData.gridDirect==='across'" @change="handleCheckChange('across')"/>
            <span class="g-pd-l-3 g-fs-12 g-bold">横向</span>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mxgraph from 'src/pages/mxgraph/graph/index';
import { getStyleObj, getStyleStr } from 'src/util/common';
//// import { isReadOnlyMode } from 'src/util/readOnly';
import { SysMLUtilHelper } from 'src/api/sysml-imports';
import { cloneDeep } from 'lodash';
import ResizeUtil from '@/pages/mxgraph/resizeUtil';
import { GraphShapeUtil } from '@/pages/mxgraph/GraphShapeUtil';
const { mxOutline, mxEvent } = mxgraph;
const options = ['直角', '圆角', '阴影', '滤镜'];
const borderLines = [
  { label: '直线', value: '0', disabled: false },
  { label: '虚线', value: '1', disabled: false },
  { label: '点线1', value: '2', disabled: false },
  { label: '点线2', value: '3', disabled: false }
];
const isGradient = [
  { label: '纯色', value: '0', disabled: false },
  { label: '渐变', value: '1', disabled: false }
];
const gradientDirect = [
  { label: '向上', value: 'north', disabled: false },
  { label: '向下', value: 'south', disabled: false },
  { label: '向左', value: 'west', disabled: false },
  { label: '向右', value: 'east', disabled: false }
];
const fontFamilys = [
  { label: '默认', value: 'Helvetica' },
  { label: '宋体', value: 'Simsun', disabled: false },
  { label: '楷体', value: 'KaiTi', disabled: false }
];
const canvasBounds = [
  { label: '1400 X 800', value: '1400:800', disabled: false },
  { label: '1600 X 900', value: '1600:900', disabled: false },
  { label: '1000 X 600', value: '1000:600', disabled: false },
  { label: '800 X 400', value: '800:400', disabled: false }
];

export default {
  name: 'outline',
  props: {
    graph: Object,
    //// actions: Object
  },
  data() {
    //// console.log(process);
    return {
      dropActive: false,
      panels: {
        outline: { icon: 'geSpriteT-outline', name: 'outline' }
      },
      canvasData: {
        x: 20,
        y: 20,
        width: 1400,
        height: 800,
        min: 1,
        max: 100000,
        isGrid: false,
        bounds: '1400:800',
        gridColor: '#000000',
        gridSize: 1,
        gridDirect: 'across',
      },
      canvasBounds: canvasBounds,
      shapeData: {
        x: 0,
        y: 0,
        width: 0,
        height: 0,
        min: 0,
        isScale: false,
      },
      styleData: {
        opacity: 100,
        strokeColor: '',
        strokeWidth: 1,
        fillColor: '',

        dashed: '',
        dashPattern: '',
        sharp: '',
        rounded: '',
        shadow: '',
        glass: '',
        gradient: 1,
        gradientDirect: '',
        gradientColor: '',
      },
      styleStr: '',
      checkedList: [], //// 已选中项
      options: options, //// 选项
      borderLines: borderLines,
      isGradient: isGradient,
      gradientDirect: gradientDirect,
      fontFamilys: fontFamilys,
      isShow: false,
      fontData: {
        fontFamily: '',
        //// fontSize: '',
        fontColor: '',
        fontStyle: 0,
        spacing: 0,
        spacingTop: 0,
        spacingBottom: 0,
        spacingLeft: 0,
        spacingRight: 0,
        labelBackgroundColor: '',
        labelBorderColor: '',
        textOpacity: 100,
        align: 'center',
        verticalAlign: 'middle',
      },
      buttonFlag: {
        bold: 0,
        italic: 0,
        underline: 0,
        left: 0,
        center: 1,
        right: 0,
        top: 0,
        middle: 1,
        bottom: 0,
      },
      activePanel: '',
      outline: undefined,
      isDev: process.env.NODE_ENV === 'development'
    };
  },
  computed: {
    panelList() {
      return Object.values(this.panels);
    },
  },
  watch: {
    graph(val) {
      if (!this.outline && val) {
        this.createOutline();
      }
    },
  },
  beforeDestroy() {
    //// 由父组件提前销毁
    //// this.outline &&  this.outline.destroy();
    //// this.$refs.outline.outline.destroy();
  },
  methods: {
    handleToggle(name) {
      //// todo----
      //// if (isReadOnlyMode() && (name === 'stylepanel' || name == 'textpanel')) {
      ////   return;
      //// }
      const targetPanel = this.panels[name];
      if (this.activePanel === name) {
        this.activePanel = undefined;
        if (name === 'outline') {
          this.outline.suspended = true;
        }
      } else {
        this.activePanel = name;
        if (name === 'outline') {
          this.outline.suspended = false;
          this.$nextTick(() => {
            this.outline.update(true);
          });
        }
      }
      //// targetPanel.show = !targetPanel.show;
    },
    //// 处理折叠收起
    showToggle(){
      this.dropActive = !this.dropActive;
      if (this.panelList.length === 1){
        this.panels =  {
          outline: { icon: 'geSpriteT-outline', name: 'outline' },
          stylepanel: { icon: 'geSpriteT-stylepanel', name: 'stylepanel' },
          textpanel: { icon: 'geSpriteT-textpanel', name: 'textpanel' },
          arrangepanel: { icon: 'geSpriteT-arrangepanel', name: 'arrangepanel' },
          canvaspanel: { icon: 'geSpriteT-canvaspanel', name: 'canvaspanel' },
        };
      } else {
        this.panels =  {
          outline: { icon: 'geSpriteT-outline', name: 'outline' }
        };
        this.outline.suspended = true;
        if (this.activePanel) this.activePanel = 'outline';
      }
    },
    handleClose() {
      this.activePanel = undefined;
    },
    createOutline() {
      this.outline = new mxOutline(this.graph, this.$refs.outlineDom);
      //// this.outline.outline.source.container = this.$refs.outlineDom;
      this.updateOutline();
      //// this.outline.outline.background = '#fff';
      //// this.outline.refresh();
      this.updateCanvasData();
      this.graph
        .getSelectionModel()
        .addListener(mxEvent.CHANGE, this.handleSelectChange);
    },
    updateOutline() {
      const outline = this.outline.outline;
      const graph = this.graph;
      outline.pageScale = graph.pageScale;
      outline.pageFormat = graph.pageFormat;
      outline.pageVisible = false; //// graph.pageVisible;

      outline.background =
				graph.background == null || graph.background === mxConstants.NONE
				  ? graph.defaultPageBackgroundColor
				  : graph.background;
      if (
        graph.view.backgroundPageShape != null &&
				outline.view.backgroundPageShape != null
      ) {
        outline.view.backgroundPageShape.fill =
					graph.view.backgroundPageShape.fill;
      }

      outline.refresh();
    },
    updateCanvasData() {
      this.canvasData.width = this.graph.diagramShape.bounds.width;
      this.canvasData.height = this.graph.diagramShape.bounds.height;
      this.canvasData.x = this.graph.diagramShape.bounds.x;
      this.canvasData.y = this.graph.diagramShape.bounds.y;
    },
    updateShapeData() {
      const selection = this.graph.getSelectionModel();
      const cell = selection.cells[0];
      if (cell.umlShape.box.position !== 'edge') {
        let bounds = cell.umlShape ? cell.umlShape.bounds : cell.geometry;
        this.shapeData.width = bounds.width;
        this.shapeData.height = bounds.height;
        this.shapeData.x = bounds.x;
        this.shapeData.y = bounds.y;
      }
    },
    handleCanvasSizeChange() {
      if (this.canvasData.width > this.canvasData.max)
        this.canvasData.width = this.canvasData.max;
      if (this.canvasData.width < this.canvasData.min)
        this.canvasData.width = this.canvasData.min;
      if (this.canvasData.height > this.canvasData.max)
        this.canvasData.height = this.canvasData.max;
      if (this.canvasData.height < this.canvasData.min)
        this.canvasData.height = this.canvasData.min;
      this.canvasData.x = parseFloat(this.canvasData.x) || 0;
      this.canvasData.y = parseFloat(this.canvasData.y) || 0;
      if (this.canvasData.x > 100000) this.canvasData.x = 100000;
      if (this.canvasData.x < -100000) this.canvasData.x = -100000;
      if (this.canvasData.y > 100000) this.canvasData.y = 100000;
      if (this.canvasData.y < -100000) this.canvasData.y = -100000;
      GraphShapeUtil.setBounds(this.graph.diagramShape, {
        width: this.canvasData.width,
        height: this.canvasData.height,
        x: this.canvasData.x,
        y: this.canvasData.y,
      });
      this.$bus.emit('fresh-graph', { shapeId: this.graph.diagramShape.id });
    },
    handleShapeSizeChange(name) {
      const selection = this.graph.getSelectionModel();
      const cell = selection.cells[0];
      if (!cell) return;
      let bounds = cell.umlShape ? cell.umlShape.bounds : cell.geometry;
      let ratio = bounds.width / bounds.height;
      bounds[name] = this.shapeData[name];
      if (this.shapeData.isScale) {
        if (name === 'width') {
          this.shapeData.height = this.shapeData.width / ratio;
          bounds.height = this.shapeData.height;
        } else if (name === 'height') {
          this.shapeData.width = this.shapeData.height * ratio;
          bounds.width = this.shapeData.width;
        }
      }
      GraphShapeUtil.setBounds(cell.umlShape, {
        width: this.shapeData.width,
        height: this.shapeData.height,
        x: this.shapeData.x,
        y: this.shapeData.y,
      });
      ResizeUtil.updateBoxByBounds(cell.umlShape);
      this.$bus.emit('fresh-graph', { shapeId: cell.umlShape.id });
    },
    handleCanvasChange(name) {
      console.log('diagram', this.graph.diagramShape);
      if (name === 'bounds') {
      } else if (name === 'gridSize') {
        this.graph.gridSize = this.canvasData.gridSize;
      } else if (name === 'gridColor') {
        this.graph.view.gridColor = this.canvasData.gridColor;
      }
      GraphShapeUtil.setBounds(this.graph.diagramShape, {
        width: this.canvasData.width,
        height: this.canvasData.height,
        x: this.canvasData.x,
        y: this.canvasData.y,
      });
      ResizeUtil.updateBoxByBounds(this.graph.diagramShape);
      this.$bus.emit('fresh-graph', { shapeId: this.graph.diagramShape.id });
      this.graph.view.validateBackground();
    },
    handleBorderSelectChange(checkedValue) {
      console.log('checked = ', checkedValue);
      if (checkedValue === '0') {
        this.styleData.dashed = '0';
      } else if (checkedValue === '1') {
        this.styleData.dashed = '1';
        this.styleData.dashedPattern = '1 1';
      } else if (checkedValue === '2') {
        this.styleData.dashed = '1';
        this.styleData.dashedPattern = '1 2';
      } else if (checkedValue === '3') {
        this.styleData.dashed = '1';
        this.styleData.dashedPattern = '1 3';
      }
      this.handleStyleChange();
    },
    handleSelectChange2(checkedValue) {
      if (checkedValue === '0') {
        this.isShow = false;
        this.gradient = 0;
        this.gradientColor = undefined;
      } else if (checkedValue === '1') {
        this.isShow = true;
        this.styleData.gradient = 1;
      } else if (checkedValue.includes(':')) {
        let b = checkedValue.split(':');
        this.canvasData.bounds = checkedValue;
        console.log('canvasBounds.bounds:', b);
        if (b.length === 2) {
          if (this.canvasData.gridDirect === 'across') {
            this.canvasData.width = +b[0];
            this.canvasData.height = +b[1];
          } else {
            this.canvasData.width = +b[1];
            this.canvasData.height = +b[0];
          }
        }
        this.handleCanvasChange('bounds');
      }
    },
    handleDirectSelectChange(checkedValue) {
      if (checkedValue === 'north') {
        this.styleData.gradientDirection = 'north';
      } else if (checkedValue === 'south') {
        this.styleData.gradientDirection = 'south';
      } else if (checkedValue === 'west') {
        this.styleData.gradientDirection = 'west';
      } else if (checkedValue === 'east') {
        this.styleData.gradientDirection = 'east';
      }
      this.handleStyleChange();
    },
    handleCheckboxChange(checkedValues) {
      console.log('checked = ', checkedValues);
      let borderstyle = ['sharp', 'rounded', 'shadow', 'glass'];
      for (let i = 0; i < options.length; i++) {
        if (
          checkedValues.some((value) => {
            return value === options[i];
          })
        ) {
          this.styleData[borderstyle[i]] = '1';
        } else {
          this.styleData[borderstyle[i]] = '0';
        }
      }
      this.handleStyleChange();
    },
    handleStyleChange() {
      const selection = this.graph.getSelectionModel();
      const cell = selection.cells[0];
      if (!cell) return;
      let style = cell.style;
      const styleObj = getStyleObj(style);
      Object.keys(this.styleData).forEach(style1 => {
        styleObj[style1] = this.styleData[style1];
      });

      const styles = getStyleStr(styleObj);
      cell.umlShape.box.style = styles;
      //// shapeApi.updateShapes({ oldShape: cell.umlShape, styles });
      this.$bus.emit('fresh-graph', { shapeId: cell.id });
    },

    handleStyleStrChange() {
      const selection = this.graph.getSelectionModel();
      const cell = selection.cells[0];
      if (!cell) return;
      //// shapeApi.updateShapes({
      ////   oldShape: cell.umlShape,
      ////   styles: this.styleData.style,
      //// });
      cell.umlShape.box.style = this.styleStr;
      console.log('styleStr', this.styleStr);
      this.$bus.emit('fresh-graph', { shapeId: cell.id });
    },
    handleSelectChange() {
      const selectedCell = this.graph.selectionModel.cells[0];
      if (!selectedCell) return;
      let style = selectedCell.style;
      //// if (!style.includes('fontColor')) {
      ////   style += 'fontColor:#000;';
      //// }
      const styleObj = getStyleObj(style);
      Object.keys(this.styleData).forEach((style1) => {
        this.styleData[style1] = styleObj[style1];
      });
      this.styleStr = style;
      Object.keys(this.fontData).forEach((style2) => {
        this.fontData[style2] = styleObj[style2];
      });
      this.updateCanvasData();
      this.updateShapeData();
    },
    handleFontChange() {
      const selection = this.graph.getSelectionModel();
      const cell = selection.cells[0];
      if (!cell) return;
      let style = cell.style;
      const styleObj = getStyleObj(style);
      Object.keys(this.fontData).forEach(style2 => {
        styleObj[style2] = this.fontData[style2];
      });
      let tempStyle = cloneDeep(styleObj);
      delete tempStyle.style;
      const styles = getStyleStr(tempStyle);
      cell.umlShape.box.style = styles;
      //// shapeApi.updateShapes({ oldShape: cell.umlShape, styles });
      this.$bus.emit('fresh-graph', { shapeId: cell.id });
    },
    handleFontStyle(name) {
      Object.keys(this.buttonFlag).some((flag) => {
        if (flag === name) {
          this.buttonFlag[flag] ^= 1;
          if (this.buttonFlag[flag] === 1) {
            if (flag === 'left') {
              this.buttonFlag.right = 0;
              this.buttonFlag.center = 0;
            } else if (flag === 'right') {
              this.buttonFlag.left = 0;
              this.buttonFlag.center = 0;
            } else if (flag === 'center') {
              this.buttonFlag.left = 0;
              this.buttonFlag.right = 0;
            } else if (flag === 'top') {
              this.buttonFlag.middle = 0;
              this.buttonFlag.bottom = 0;
            } else if (flag === 'middle') {
              this.buttonFlag.top = 0;
              this.buttonFlag.bottom = 0;
            } else if (flag === 'bottom') {
              this.buttonFlag.top = 0;
              this.buttonFlag.middle = 0;
            }
          }
        }
      });
      Object.keys(this.buttonFlag).forEach((flag) => {
        if (flag === 'bold' && this.buttonFlag[flag] === 1) {
          this.fontData.fontStyle += 1;
        } else if (flag === 'italic' && this.buttonFlag[flag] === 1) {
          this.fontData.fontStyle += 2;
        } else if (flag === 'underline' && this.buttonFlag[flag] === 1) {
          this.fontData.fontStyle += 4;
        } else if (this.buttonFlag[flag] === 1) {
          if (flag === 'left' || flag === 'right' || flag === 'center') {
            this.fontData.align = flag;
          } else if (flag === 'top' || flag === 'middle' || flag === 'bottom') {
            this.fontData.verticalAlign = flag;
          }
        }
      });
      this.handleFontChange();
    },
    handleCheckChange(name) {
      if (name === 'ratio') {
        this.shapeData.isScale = !this.shapeData.isScale;
      } else if (name === 'grid') {
        this.canvasData.isGrid = !this.canvasData.isGrid;
        this.graph.gridEnabled = !this.graph.gridEnabled;
      } else if (name === 'cross') {
        this.canvasData.gridDirect = 'cross';
        this.handleSelectChange2(this.canvasData.bounds);
      } else if (name === 'across') {
        this.canvasData.gridDirect = 'across';
        this.handleSelectChange2(this.canvasData.bounds);
      }
      this.handleCanvasChange(name);
    },
  },
};
</script>

<style lang='scss' scoped>
.v-outline-menu {
	position: absolute;
	right: 15px;
	top: 13px;
	z-index: 999;
	//// width: 36px;
	overflow: visible;
	._hold-bar {
		height: 10px;
    background: linear-gradient(90deg, #4390C1 0%, #236FA0 100%);
	}
	._bar-item-container {
    width: 38px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
		background: linear-gradient(
			180deg,
			#e5f6ff 0%,
			#c8e3f3 100%,
			#cae4f3 100%,
			#abd7ef 100%
		);
		border: 1px solid #b1cee2;
		.__bar-item {
			width: 24px;
      height: 24px;
			cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 6px;
			&:hover {
				background: linear-gradient(107deg, #a3dbff 0%, #74c5f8 100%)
			}
      &:active {
				background: linear-gradient(107deg, #7FC8F6 0%, #3EA5E6 100%)
			}
		}
  }
  ._drop-bar {
    width: 38px;
    height: 20px;
    text-align: center;
    background: linear-gradient(297deg, #C0DBEA 0%, #DEF2FD 100%);
    border: 1px solid #B1CEE2;
    border-top: 0;
    cursor: pointer;
    &:hover {
				background: linear-gradient(107deg, #a3dbff 0%, #74c5f8 100%)
			}
    &:active {
      background: linear-gradient(107deg, #7FC8F6 0%, #3EA5E6 100%)
    }
    img{
      margin-bottom: 4px;
    }
    ._dropicon{
      transform: rotate(180deg);
    }
	}
	._panel {
		position: absolute;
		width: 240px;

		top: 0;
		left: -240px;
		box-shadow: 1px 3px 5px #c0c0c0;
		//// background: url(../images/window.gif);
		border: 1px solid #c3c3c3;
		._bottom-border {
			border: #ddd solid 1px;
			border-top: 0px;
			border-left: 0px;
			border-right: 0px;
			margin-left: -12px;
			margin-right: -12px;
		}
		/deep/ .ant-checkbox-group {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			margin-left: 12px;
			padding-bottom: 10px;
			.ant-checkbox-wrapper.ant-checkbox-group-item {
				font-size: 12px;
				margin-right: 1px;
				font-weight: 500;
				.ant-checkbox {
					margin-right: -3.5px;
				}
			}
		}
		.geButton.geColorBtn.g-m-button {
			width: 30px;
			height: 30px;
		}

		._panel-header {
			font-family: Helvetica Neue, Arial, PingFang SC, Microsoft YaHei;
			text-align: left;
			font-size: 12px;
			color: #fff;
      padding: 4px;
      padding-left: 8px;
			background: linear-gradient(90deg, #4390c1 0%, #236fa0 100%);
		}
		._panel-container {
			padding: 12px;
			background: white;
			/deep/ svg {
				background-image: none !important;
			}
			.g-m-select {
				/*height: 25px !important;*/
				width: 80px !important;
			}
			/deep/ ._width-change {
				.ant-select-selection.ant-select-selection--single {
					width: 202px;
				}
			}

			._select-width {
				width: 204px;
				margin-bottom: 9px;
			}
			.ant-input {
				height: 22px !important;
				padding: 1px 1px !important;
				width: 45px !important;
				margin-right: 10px !important;
			}
			.ant-select-selection {
				height: 25px !important;
			}

			.g-m-button {
				border-radius: 0px;
				opacity: 1;
				border: 1px solid rgb(160, 160, 160);
				padding: 2px 1px 4px 4px;
				margin: 1px;
        height: 25px;
				width: 25px;
			}
			.changeColor {
				background-image: linear-gradient(
					rgb(197, 236, 255) 0px,
					rgb(135, 212, 251) 100%
				);
			}
			.g-m-checkbox {
				height: 15px;
				width: 15px;
				font-size: 10px;
				padding: 0px;
			}
			.ant-checkbox {
				.span {
					padding: 0px !important;
				}
			}
		}
	}
}
</style>

